<template>
	<view class="content">
		<view class="navigation_bar">
			<uni-icons type="back" size="24" color="#3C3C3C" @click='GoBack'></uni-icons>
			<view class="center">我要跨转</view>
			<view class="leftIcon" v-if="showRight" @click="details">
				跨转明细
			</view>
		</view>
		<view class="center-content">
			<view class="title">跨转数量</view>
			<view class="input">
				<input type="number" v-model="number" name="" id="" placeholder="￥请输入跨转数量">
			</view>
		</view>
		<view class="choseMoney">
			<view class="numberList">
				<view  v-for="(item,index) in numberList"
					:key="index" class="item">
					<view :class=" numberIndex == index ? 'activeItem':'numberItem'" @click="choseNumber(item,index)">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="choseType">
			<view class="typeList">
				<view v-for="(item,index) in typeList"
					:key="index" class="item">
					<view :class=" numberIndex == index ? 'activeItem':'numberItem'" >{{item.name}}</view>
				</view>
				<image src="/static/static-home/true.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			</view>
		</view>
		<view class="submit" @click="submit">确认</view>
		<passWordPopup :show='isProp' @close='isProp=false' @callBack="sure" />
	</view>
</template>

<script>
	import passWordPopup from "@/components/basicComponents/passWordPopup.vue"
	import { swapPoint } from "@/api/api.js"
	export default {
		components: {
			passWordPopup
		},
		data() {
			return {
				isProp: false,
				showRight: true,
				numberList: [100, 500, 1000, 2000, 5000],
				numberIndex: -1,
				typeList:[
					{
						name:'多多券'
					}
				],
				typeIndex:0,
				number:''
			};
		},
		methods:{
			details(){
				uni.navigateTo({
					url:'/pages/mine/crossBorder/details/details'
				})
			},
			choseNumber(item,index){
				this.number = item
				this.numberIndex = index
			},
			submit(){
				if(!this.number){
					uni.showToast({
						icon:'none',
						title:'请输入跨转数量'
					})
					return
				}else{
					this.isProp = true
				}
			},
			sure(payPassword) {
				uni.showLoading({
					title:'请稍等'
				})
				const data = {
					point:this.number,
					payPassword,
				}
				swapPoint(data).then(res=>{
					console.log(res);
					if(res.code == 200){
						uni.showToast({
							icon:'none',
							title:res.msg,
							duration:500
						})
						uni.hideLoading()
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F4F4F4;
	}

	.content {
		padding: 163rpx 24rpx;

		.navigation_bar {
			padding: 43rpx 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			width: calc(100% - 52rpx);

			.center {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-weight: 500;
				font-size: 32rpx;
				color: #181A1C;
			}
		}

		.center-content {
			background-color: #fff;
			padding: 27rpx 26rpx;
			border-radius: 24rpx;

			.title {
				font-weight: 500;
				font-size: 30rpx;
				color: #181A1C;
			}

			.input {
				width: 100%;
				border-bottom: 1rpx solid #D8D8D8;
				margin-top: 33rpx;
				display: flex;
				align-items: center;
				padding: 12rpx 0;
			}
		}

		.choseMoney {
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 24rpx;

			.numberList {
				display: grid;
				grid-template-columns: repeat(3, 2fr);
				padding: 28rpx 26rpx;
				grid-row-gap: 20rpx;
				grid-column-gap: 19rpx;
				.numberItem {
					background: #F7F7F7;
					border-radius: 16rpx;
					text-align: center;
					line-height: 82rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}

				.activeItem {
					border-radius: 16rpx;
					text-align: center;
					line-height: 82rpx;
					background-color: #04C538;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
		.choseType{
			margin-top: 30rpx;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 49rpx 26rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			
			.typeList{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		.submit{
			width: 100%;
			line-height: 90rpx;
			background-color: #04C538;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 50rpx;
			margin-top: 50%;
		}
	}
</style>